home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Scrollers / translucent-scroller.izs < prev    next >
Text File  |  2005-09-02  |  8KB  |  221 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Translucent scroller
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION> This is a sleek, "translucent" scroller. In between message changes, the scroller turns semi transparent (in IE4/NS6+) as the next message slides up to cover the old. A handsome effect you may have seen in the past rendered using Flash, except this isnt!
  9.  
  10. Note that the translucent effect is not visible in NS4 (though scroller functions in it).
  11.  
  12. <!/DESCRIPTION> 
  13.  
  14. <!CATEGORY>scrollers<!/CATEGORY>
  15.  
  16. <!SCRIPT>
  17. <!-- START OF SCRIPT -->
  18. <script language="JavaScript1.2">
  19.  
  20. //Translucent scroller- By Dynamic Drive
  21. //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
  22. //This credit MUST stay intact for use
  23.  
  24. var scroller_width='150px'
  25. var scroller_height='115px'
  26. var bgcolor='#E0EFD1'
  27. var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
  28.  
  29. var scrollercontent=new Array()
  30. //Define scroller contents. Extend or contract array as needed
  31. scrollercontent[0]='Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!'
  32. scrollercontent[1]='Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.'
  33. scrollercontent[2]='Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'
  34.  
  35.  
  36. ////NO need to edit beyond here/////////////
  37.  
  38. var ie4=document.all
  39. var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
  40.  
  41. if (ie4||dom)
  42. document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
  43. else if (document.layers){
  44. document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
  45. }
  46.  
  47. var curpos=scroller_height*(1)
  48. var degree=10
  49. var curcanvas="canvas0"
  50. var curindex=0
  51. var nextindex=1
  52.  
  53. function moveslide(){
  54. if (curpos>0){
  55. curpos=Math.max(curpos-degree,0)
  56. tempobj.style.top=curpos+"px"
  57. }
  58. else{
  59. clearInterval(dropslide)
  60. if (crossobj.filters)
  61. crossobj.filters.alpha.opacity=100
  62. else if (crossobj.style.MozOpacity)
  63. crossobj.style.MozOpacity=1
  64. nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
  65. tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
  66. tempobj.innerHTML=scrollercontent[curindex]
  67. nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
  68. setTimeout("rotateslide()",pause)
  69. }
  70. }
  71.  
  72. function rotateslide(){
  73. if (ie4||dom){
  74. resetit(curcanvas)
  75. crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
  76. crossobj.style.zIndex++
  77. if (crossobj.filters)
  78. document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
  79. else if (crossobj.style.MozOpacity)
  80. document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
  81. var temp='setInterval("moveslide()",50)'
  82. dropslide=eval(temp)
  83. curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
  84. }
  85. else if (document.layers){
  86. crossobj.document.write(scrollercontent[curindex])
  87. crossobj.document.close()
  88. }
  89. curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
  90. }
  91.  
  92. function resetit(what){
  93. curpos=parseInt(scroller_height)*(1)
  94. var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
  95. crossobj.style.top=curpos+"px"
  96. }
  97.  
  98. function startit(){
  99. crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
  100. if (ie4||dom){
  101. crossobj.innerHTML=scrollercontent[curindex]
  102. rotateslide()
  103. }
  104. else{
  105. document.tickernsmain.visibility='show'
  106. curindex++
  107. setInterval("rotateslide()",pause)
  108. }
  109. }
  110.  
  111. if (ie4||dom||document.layers)
  112. window.onload=startit
  113.  
  114. </script>
  115. <!-- END OF SCRIPT -->
  116. <!/SCRIPT>
  117.  
  118. <!PREVIEW>
  119. <!-- START OF SCRIPT -->
  120.  
  121. <script language="JavaScript1.2">
  122.  
  123. //Translucent scroller- By Dynamic Drive
  124. //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
  125. //This credit MUST stay intact for use
  126.  
  127. var scroller_width='150px'
  128. var scroller_height='115px'
  129. var bgcolor='#E0EFD1'
  130. var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
  131.  
  132. var scrollercontent=new Array()
  133. //Define scroller contents. Extend or contract array as needed
  134. scrollercontent[0]='Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!'
  135. scrollercontent[1]='Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.'
  136. scrollercontent[2]='Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'
  137.  
  138.  
  139. ////NO need to edit beyond here/////////////
  140.  
  141. var ie4=document.all
  142. var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
  143.  
  144. if (ie4||dom)
  145. document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
  146. else if (document.layers){
  147. document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
  148. }
  149.  
  150. var curpos=scroller_height*(1)
  151. var degree=10
  152. var curcanvas="canvas0"
  153. var curindex=0
  154. var nextindex=1
  155.  
  156. function moveslide(){
  157. if (curpos>0){
  158. curpos=Math.max(curpos-degree,0)
  159. tempobj.style.top=curpos+"px"
  160. }
  161. else{
  162. clearInterval(dropslide)
  163. if (crossobj.filters)
  164. crossobj.filters.alpha.opacity=100
  165. else if (crossobj.style.MozOpacity)
  166. crossobj.style.MozOpacity=1
  167. nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
  168. tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
  169. tempobj.innerHTML=scrollercontent[curindex]
  170. nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
  171. setTimeout("rotateslide()",pause)
  172. }
  173. }
  174.  
  175. function rotateslide(){
  176. if (ie4||dom){
  177. resetit(curcanvas)
  178. crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
  179. crossobj.style.zIndex++
  180. if (crossobj.filters)
  181. document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
  182. else if (crossobj.style.MozOpacity)
  183. document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
  184. var temp='setInterval("moveslide()",50)'
  185. dropslide=eval(temp)
  186. curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
  187. }
  188. else if (document.layers){
  189. crossobj.document.write(scrollercontent[curindex])
  190. crossobj.document.close()
  191. }
  192. curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
  193. }
  194.  
  195. function resetit(what){
  196. curpos=parseInt(scroller_height)*(1)
  197. var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
  198. crossobj.style.top=curpos+"px"
  199. }
  200.  
  201. function startit(){
  202. crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
  203. if (ie4||dom){
  204. crossobj.innerHTML=scrollercontent[curindex]
  205. rotateslide()
  206. }
  207. else{
  208. document.tickernsmain.visibility='show'
  209. curindex++
  210. setInterval("rotateslide()",pause)
  211. }
  212. }
  213.  
  214. if (ie4||dom||document.layers)
  215. window.onload=startit
  216.  
  217. </script>
  218. <!-- END OF SCRIPT -->
  219. <!/PREVIEW>
  220.  
  221. <!RELATED>NONE<!/RELATED>